<template>
  <div>
    <div style="float:left">
      <el-button size="small" @click="addList" class="bg">上报</el-button>
    </div>

    <div style="float:right">
      <el-input v-model="obj.province" placeholder='请输入内容'></el-input>
    </div>

    <el-table :data="dataList.list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="50" align="center" fixed="left">
      </el-table-column>
      <el-table-column prop="country" label="国家" align="center">
      </el-table-column>
      <el-table-column prop="province" label="省份" align="center">
      </el-table-column>
      <el-table-column prop="city" label="市" align="center"> </el-table-column>
      <el-table-column prop="area" label="区" align="center"> </el-table-column>
      <el-table-column prop="confirmed" label="现有确诊" align="center">
      </el-table-column>
      <el-table-column prop="suspected" label="疑似" align="center">
      </el-table-column>
      <el-table-column prop="dead" label="死亡" align="center">
        <template v-slot="scope">
          <el-tag type="danger">{{ scope.row.dead }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="cure" label="治愈" align="center">
        <template v-slot="scope">
          <el-tag type="success">{{ scope.row.cure }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="severe" label="累计确诊" align="center">
      </el-table-column>
      <el-table-column prop="outside" label="境外输入" align="center">
      </el-table-column>
      <el-table-column prop="inputTime" label="录入时间" width="180" align="center" fixed="right">
        <template v-slot="scope">
          <div>{{ scope.row.inputTime | dataFMT }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="dataList.total" :page-size='obj.pageSize'
      :current-page='obj.page' @current-change='change_page'></el-pagination>
  </div>
</template>

<script>
  import moment from "moment";
  //从vuex中导入辅助函数
  //辅助函数：帮助我们快速获取状态机中的变量或者方法
  import {
    mapState,
    mapActions
  } from "vuex";
  export default {
    watch: {
      obj: {
        handler: function () {
          this.page_query(this.obj)
        },
        deep: true
      }
    },
    filters: {
      dateFMT(str) {
        return moment(str).format("YYYY-MM-DD");
      },
    },
    //计算属性
    computed: {
      // 从data_list.js 文件的state中获取dataList变量
      ...mapState("data_list", ["dataList"]),
    },
    data() {
      return {
        obj: {
          page: 1,
          pageSize: 5,
        },
        total: 100
      };
    },
    created() {
      this.page_query(this.obj);
    },
    methods: {
      //从data_list.js文件的actions中获取page_query方法
      ...mapActions("data_list", ["page_query"]),
      change_page(val) {
        this.obj.page = val;
      },
      addList() {
        this.$router.push({
          path: '/data/data_submit',

        })
      }
    },
  };

</script>
<style scoped>
.bg{
  color: #fff;
  background-color: #2cb5ac;
}
</style>
